<template>
<div>
  <h1>
    当前的num值为：{{num}}
  </h1>
    <h1>
    放大十倍的num值为：{{bigNum}}
  </h1>
</div>

</template>

<script>

// 从vuex中导入 mapState和mapGetters
import {mapState,mapGetters} from 'vuex'

export default {
  data() {
    return {
      
    }
  },
  computed:{
    // 常规写法
    // --------

    // num(){
    //   return this.$store.state.num
    // },
    // bigNum(){
    //   return this.$store.getters.bigNum
    // }

    // -------------
    
    // 借助 mapState 和 map Getters
    // ------------------

    // 对象式写法  
    // ...mapState({num:'num'}),
    // ...mapGetters({bigNum:'bigNum'})
     
    //数组写法，当然 'foo' <=> foo:'foo'
    
      ...mapState(['num']),
      ...mapGetters(['bigNum'])
    
    // -------------- 
   
  },
  mounted(){
     console.log(this);
  }
}
</script>

<style>

</style>